<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>checkbox</title>
	<script src="/static/js3/jQuery-2.1.4/jquery-2.1.4.min.js"></script>
	<script>
		function checkAll(f) {
            $('[name=hobby]').prop('checked',f);
            myF();
        }
		function checkUnAll() {
            $('[name=hobby]').prop('checked',function (i,value) {
                console.log(value);
                return !value;
            });
            myF();
        }
        function checkChange (inputEle) {
            $('[name=hobby]').prop('checked',$(inputEle).prop('checked'))
        }
        function myF() {
			var result=true;
            $('[name=hobby]').each(function (i,value){
				var checked=$(value).prop('checked');
                result=result&&checked;
            });
            $('#checkAll').prop('checked',result);
        }
        $(function () {
            $('[name=hobby]').change(function () {
                myF();
            })
        })
	</script>
</head>
<body>
	请选择你的爱好:<br/>
	<input type="checkbox" onchange="checkChange(this)" id="checkAll"/>全选/全不选<br/>
	<div>
		<input type="checkbox" name="hobby"/>JAVA&nbsp;
		<input type="checkbox" name="hobby"/>打篮球&nbsp;
		<input type="checkbox" name="hobby"/>上网&nbsp;
		<input type="checkbox" name="hobby"/>撩妹&nbsp;
	</div>
	
	<div>
		<input type="button" id="btn_checkAll" onclick="checkAll(true)" value="全选"/>
		<input type="button" onclick="checkAll(false)" value="全不选"/>
		<input type="button" onclick="checkUnAll()" value="反选"/>
	</div>
</body>
</html>